<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background: url(./imgs/1.jpg);
    }
    div{
        
        background: rgba(255, 255, 255, .2);
        text-align: center;
        padding: 50px 0;
    }
    img{
        cursor: pointer;
           
    }

</style>
<body>
    <div >
       <img width="150px" src="./imgs/1.jpg" alt="">
       <img width="150px" src="./imgs/2.jpg" alt="">
       <img width="150px" src="./imgs/3.jpg" alt="">
       <img width="150px" src="./imgs/4.jpg" alt="">
       <img width="150px" src="./imgs/5.jpg" alt="">
    </div>
</body>
<script>
    window.onload = function(){
        var imgs = document.querySelectorAll("img");

        for (let i=0;i<imgs.length;i++) {
            imgs[i].onclick = function(){
                document.body.style.background='url(./imgs/'+(i+1)+'.jpg)';
            }  
        }

    }
</script>
</html>